<%--
  Created by bothin
  At 2019/12/17 11:35
  Description: 
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <%@include file="../component/head_link_css_js.jsp"%>

    <style>
        .layui-form-item .layui-input-inline{
            width: 380px;
        }
        .layui-select-title{
            margin-right: 10px;
        }
        .layui-form-select .layui-edge{
            right: 20px;
        }
        #createTime{
            width: 203.5%;
        }
        .list_item{
            margin-top: 7px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 头部区域 -->
    <%@include file="../component/nav_header.jsp"%>
    <!-- 侧边菜单 -->
    <jsp:include page="../component/nav_side_menu.jsp">
        <jsp:param name="nav" value="5#1" />
    </jsp:include>

    <!-- 内容主体区域 -->
    <div class="layui-body" id="LAY_app_body" style="top: 50px;">
        <div class="layui-fluid">
            <div class="layui-card">
                <form class="layui-form"  action="${pageContext.request.contextPath}/contact/add" method="post"
                      style="padding: 30px;width: 500px;margin-left: 100px;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">客户 *</label>
                        <div class="layui-input-block">
                            <select  name="customerId" required  lay-search>
                                <option value="">请选择客户</option>
                                <c:forEach items="${customers}" var="item">
                                    <option value="${item.customerId}" ${item.customerId.equals(contactDTO.customerId)?"selected":''}>${item.customerName}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">销售员 *</label>
                        <div class="layui-input-block">
                            <select name="employeeId" required lay-search>
                                <option value="">请选择销售员</option>
                                <c:forEach items="${salesmans}" var="item">
                                    <option value="${item.employeeId}" ${item.employeeId.equals(contactDTO.employeeId)?"selected":''}>${item.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">签定时间 *</label>
                        <div class="layui-inline">
                            <input type="text" name="createTime" placeholder="（不填默认为当前时间）" class="layui-input" id="createTime">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品 *</label>
                        <div class="layui-input-block" id="product_block">
                            <select  lay-search id="sel_product">
                                <option value="">请选择商品</option>
                                <c:forEach items="${products}" var="item">
                                    <option value="${item.productId}">${item.productName}</option>
                                </c:forEach>
                            </select>
                            <input type="number" min="1" class="layui-input" id="in_count"
                                  style="width: 332px;display: inline-block;" placeholder="请输入数量">
                            <button type="button" id="btn_add" class="layui-btn layui-btn-sm" style="display: inline-block;">添加</button>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品列表：</label>
                        <div class="layui-inline">
                            <div id="product_list">
                                <c:forEach items="${contactDTO.contactDetailDTOList}" var="item">
                                    <div class="list_item">
                                        <span style="font-size: 16px;" class="in_productName">${item.product.productName}</span>
                                        <input type="number" required name="productQuantity" class="in_count" min="1" value="${item.productQuantity}" style="width: 50px;margin-left: 50px;">
                                        <button type="button" class="list_item_delete layui-btn layui-btn-danger layui-btn-xs" style="margin-left: 26px;">删除</button>
                                        <input type="text" name="productId" value="${item.productId}" style="display:none;">
                                    </div>
                                </c:forEach>
                            </div>
                        </div>
                    </div>
                    <c:if test="${contactDTO!=null}">
                        <div class="layui-form-item layui-hide">
                            <div class="layui-input-inline">
                                <input type="text" name="contactId" value="${contactDTO.contactId}" autocomplete="off" class="layui-input layui-form-danger">
                            </div>
                        </div>
                    </c:if>


                    <div class="layui-form-item">
                        <div class="layui-input-block" style="margin-left: 143px;">
                            <button class="layui-btn" type="submit">立即提交</button>
                            <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


</body>
</html>
<script>
    layui.config({
        base: '${pageContext.request.contextPath}/resources/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'laydate','sample','useradmin','layer','form'], function(){

        var $ = layui.$
            ,form = layui.form
            ,laydate = layui.laydate,layer=layui.layer;
        //执行一个laydate实例
        laydate.render({
            elem: '#createTime' //指定元素
            ,type: 'datetime'
            ,format: 'yyyy-MM-dd HH:mm:ss'
            ,value: '${contactDTO.createTime}'
            ,max: 0
        });

        $("#btn_add").click(function () {
            var product = $("#sel_product option:selected");
            var count = $("#in_count").val();

            if (product.val()!=""&&product.val()!=undefined&&count!=""&&count!=0){
                var list_item =  $(".list_item");
                for (var i = 0; i < list_item.length; i++){
                    if (list_item.eq(i).children(".in_productName").text()===product.text()){
                        var in_count =  list_item.eq(i).children(".in_count").val();
                        list_item.eq(i).children(".in_count").val(parseInt(count)+parseInt(in_count));
                        return;
                    }
                }

                var str = "<div class=\"list_item\">\n" +
                    "            <span style=\"font-size: 16px;\" class='in_productName'>"+product.text()+"</span>\n" +
                    "            <input type=\"number\" required name='productQuantity' class='in_count'  min=\"1\" value=\""+count+"\" style=\"width: 50px;margin-left: 50px;\">\n" +
                    "            <button type='button' class=\"list_item_delete layui-btn layui-btn-danger layui-btn-xs\" style=\"margin-left: 26px;\">删除</button>\n" +
                    "            <input type=\"text\" name=\"productId\" value='" + product.val() + "' style=\"display:none;\">\n" +
                    "      </div>";
                $("#product_list").append(str);
            }
        })

        //动态绑定事件 删除商品
        $("#product_list").on('click','.list_item_delete',function () {
            $(this).parent().remove();
        })

    });

</script>
